<template>
  <div class="my-money">
    <div class="date-money">
      <div class="date-money-money">516.36</div>
      <div class="date-money-date">今日收益</div>
      <div class="date-money-date-list">近一周</div>
    </div>
    <div class="tab">
      <div :class="{'tab-checked': tabChecked === 0}"
           class="tab-tab"
           @click="tabChecked = 0">收入明细</div>
      <div :class="{'tab-checked':  tabChecked === 1}"
           class="tab-tab"
           @click="tabChecked = 1">支出明细</div>
    </div>
    <div class="list">
      <div class="per"
           v-for="(item, index) in 3">
        <div class="list-contain">
          <div class="list-contain-left">¥230.25</div>
          <div class="list-contain-right">2018-05-23 23:24</div>
        </div>
        <div class="list-dividing"></div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins'
export default {
  name: 'my-money',
  data () {
    return {
      tabChecked: 0
    }
  },
  mixins: [mixins],
  methods: {
  },
  mounted () {
    this.$BIND_LOADING(true)
  },
  components: {
  }
}
</script>

<style lang="stylus" scoped>
.my-money {
  .date-money {
    margin-left: 30px;
    margin-top: 34px;

    .date-money-money {
      font-size: 68px;
      color: rgba(26, 26, 26, 1);
      font-family: DINCondensed-Bold !important;
    }

    .date-money-date {
      font-size: 28px;
      color: rgba(153, 153, 153, 1);
      margin-bottom: 15px;
    }

    .date-money-date-list {
      font-size: 24px;
      color: rgba(26, 26, 26, 1);
    }
  }

  .tab {
    display: flex;
    justify-content: space-around;

    .tab-tab {
      font-size: 30px;
      color: rgba(153, 153, 153, 1);
      width: 50%;
      display: flex;
      justify-content: center;
    }

    .tab-checked {
      font-size: 30px;
      color: rgba(51, 51, 51, 1);
    }
  }

  .list {
    margin-top: 62px;

    .list-contain {
      display: flex;
      padding-left: 30px;
      padding-right: 30px;

      .list-contain-left {
        font-size: 30px;
        color: rgba(174, 42, 38, 1);
      }

      .list-contain-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        font-size: 26px;
        color: rgba(51, 51, 51, 1);
      }
    }

    .list-dividing {
      width: 100%;
      height: 3px;
      background: RGBA(220, 220, 220, 1);
      margin-bottom: 34px;
    }
  }
}
</style>
